<template>
  <div class="tab">
    <div class="tab-header">
      <div
        v-for="(value, key) in tabData"
        :key="key"
        :class="['tab-item', { active: key === currentTab }]"
        @click="switchTab(key)"
      >
        {{ value }}
      </div>
    </div>
    <div class="component">
      <!-- <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive> -->
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
import Intro from "./Intro";

// vue3 加载异步组件形式 defineAsyncComponent
// import { defineAsyncComponent } from "vue";
// const List = defineAsyncComponent(() => import("./List"));
// const Article = defineAsyncComponent(() => import("./Article"));

// vue2 加载异步组件形式
import Vue from "vue";
const List = Vue.component("List", () => import("./List"));
const Article = Vue.component("Article", () => import("./Article"));

export default {
  name: "Tab",
  component: {
    Intro,
    List,
    Article,
  },
  data() {
    return {
      currentTab: "intro",
      tabData: {
        intro: "Intro",
        list: "List",
        article: "Article",
      },
    };
  },
  computed: {
    currentComponent() {
      switch (this.currentTab) {
        case "intro":
          return Intro;
        case "list":
          return List;
        case "article":
          return Article;
        default:
          break;
      }
    },
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
    },
  },
};
</script>

<style lang="scss">
.tab {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  margin: 50px auto;

  .tab-header {
    height: 50px;
    border-bottom: 1px solid #000;

    .tab-item {
      float: left;
      width: 33.33%;
      height: 100%;
      line-height: 50px;
      text-align: center;

      &.active {
        color: #fff;
        background-color: #000;
      }
    }
  }
  .component {
    padding: 50px;
    box-sizing: border-box;
  }
}
</style>